import React from "react";
import { action, getCnodeTopic } from "./redux/action";
import { connect } from "react-redux";

function Counter(props) {
  const { value, cnodeDataList, onIncreaseClick, getCnodeTopic,getCnodeTopicAsync } = props;
  return (
    <div>
      <span>计数器计数{value}次</span>
      <button onClick={onIncreaseClick}>+1</button>
      <button onClick={getCnodeTopic}>获取数据</button>
      <button onClick={getCnodeTopicAsync}>获取数据saga版</button>
      <ul>
      {cnodeDataList&&
        cnodeDataList.map((list)=>{
          return(
          <li key={list.id}>{list.title}</li>
          )
        })
      }
      </ul>
    </div>
  );
}

const mapStateToProps = (state) => {
  console.log(state);

  return {
    value: state.counter.count,
    cnodeDataList: state.cnodeRequest.cnodeData,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onIncreaseClick: () => dispatch(action.increaseAction),
    getCnodeTopic: () => getCnodeTopic(dispatch),
    getCnodeTopicAsync:() => dispatch({type:"setCnodeDataListSaga"}),
  };
};

const App = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default App;
